<script lang="ts" setup>
import Person from '@/components/Person.vue'
import { ref } from 'vue'

let title2 = ref()
let ren = ref()

function showLog() {
  // console.log(title2.value)
  console.log(ren.value)
}
</script>

<template>
  <div class="app">
    <h1>我是 App 根组件！</h1>
    <hr />
    <h2 ref="title2">你好</h2>
    <button @click="showLog">点我输出h2</button>
    <!-- 其中ref放到组件上获取到的是组件实例，但是看不到实例对象，是Vue3的保护措施，需要组件进行主动暴露 -->
    <Person ref="ren"></Person>
  </div>
</template>

<style scoped>
.app {
  background-color: #2fbd4e;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
